import React, { useState, useEffect } from 'react';
import { Tabs } from 'react-vant'
import axios from 'axios'
import ListItem from '../../components/listItem'
import { useNavigate } from 'react-router-dom';
const Index = () => {
  const [list, setList] = useState([]);
  const navigate = useNavigate()
  const getList = () => {
    axios.get('/api/tabs').then(resp => {
      console.log(resp.data.data)
      setList(resp.data.data)
    })
  }

  useEffect(() => {
    getList()
  }, [])
  return (
    <div>
      <Tabs>
        {
          list.map((v, i) => {
            return (
              <Tabs.TabPane key={i} title={v.title}>
                {
                  v.children.map((v, i) => {
                    return <ListItem 
                      key={i} 
                      v={v} 
                      // onClick={() => navigate('/detail?id=' + v.id)}
                      onClick={() => navigate(`/detail/${v.id}`)}
                    ></ListItem>
                  })
                }
              </Tabs.TabPane>)
          })
        }
      </Tabs>
    </div>
  )
}

export default Index